<template>
  <div class='container'>
    <div @click="isEdit=!isEdit" class="edit-btn">
      <span v-if='isEdit'>完成</span>
      <span v-else>编辑</span>

    </div>
    <van-divider dashed :style="{ color: '#1a73e8', borderColor: '#1a73e8',padding: '0 16px'  }">现有栏目</van-divider>
    <div class="new-category newcategory">
      <p @click="handleCategoryClick(index)" :class=" active === index ?  'active' : ' '
      " v-for="(item,index) in list" :key="index">{{item.title}}
        <van-icon :name=" isEdit&&index!==0 ?  'clear':'' " />
      </p>
    </div>
    <van-divider dashed :style="{ color: '#ee0a24', borderColor: '#ee0a24', padding: '0 16px' }">已删除栏目</van-divider>
    <div class="new-category delcategory">
      <p @click="deleteCategoryClick(index)" v-for="(item,index) in delCat" :key="index">{{item.title}}</p>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Number,
      required: true
    },
    list: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      newCat: [],
      delCat: [],
      isEdit: false,
      active: this.value
    }
  },

  methods: {
    async SelectCategory() {
      const res = await this.$http.get('/category')
      this.newCat = res.data
    },
    handleCategoryClick(index) {
      if (this.isEdit) {
        if (index < this.active) {
          this.$emit('input', this.active--)
        } else {
          this.$emit('input', this.active)
        }
        this.list.splice(index, 1)
      } else {
        this.$emit('input', index)
        this.$emit('close')
      }
    },
    deleteCategoryClick(index) {
      this.newCat.push(this.delCat[index])
      this.delCat.splice(index, 1)
    }
  },
  watch: {
    newCat() {
      localStorage.setItem('newCat', JSON.stringify(this.newCat))
      localStorage.setItem('delCat', JSON.stringify(this.delCat))
    }
  },
  created() {
    if (localStorage.getItem('newCat') && localStorage.getItem('delCat')) {
      this.newCat = JSON.parse(localStorage.getItem('newCat'))
      this.delCat = JSON.parse(localStorage.getItem('delCat'))
      return
    }

    this.SelectCategory()
  }
}
</script>

<style lang="less" scoped>
.edit-btn {
  position: absolute;
  top: 10px;
  right: 14px;
  width: 50px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background-color: pink;
  font-size: 14px;
}
.container {
  margin-top: 50px;
  width: 100%;
  height: 100%;
}
.new-category {
  padding: 0 2.778vw;
  display: flex;
  flex-wrap: wrap;
  p {
    width: 20%;
    text-align: center;
    margin: 1.389vw 1.944vw;
    padding: 1.944vw 0vw;
  }
}
.newcategory .active {
  color: #ee0a24;
  border: 0.278vw solid #ee0a24;
}
.newcategory {
  p {
    position: relative;
    color: #1a73e8;
    border: 0.278vw solid #1a73e8;
    .van-icon {
      position: absolute;
      font-size: 14px;
      right: -5px;
      top: -6px;
      z-index: 30;
      background-color: #fff;
    }
  }
}
.delcategory {
  p {
    color: #ee0a24;
    border: 0.278vw solid #ee0a24;
  }
}
</style>
